<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>悬挂布局</title>
  <style>
    * {
      margin: 0;
    }
    .Media {
      display: flex;
      width: 300px;
      align-items: flex-start;
      border: 1px solid red;
    }
    .Media-figure {
      margin-right: 1em;
    }
    .Media-body {
      flex: 1;
    }
  </style>
</head>
<body>
<div class="Media">
  <img class="Media-figure" src="../img/girl.png" height="150px">
  <p class="Media-body">无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部</p>
</div>
</body>
</html>
